import { useState } from 'react'
import { NavBar, Card, Button, Space, Input } from 'antd-mobile'
import { MoreOutline, UserOutline, RightOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import './zhu2.css'

function Index() {
  const navigate = useNavigate()
  const [amount, setAmount] = useState('')
  const [balance] = useState('100.00')

  const handleBack = () => {
    navigate(-1)
  }

  const handleQuickSelect = (value: string) => {
    setAmount(value)
  }

  const handleRecharge = () => {
    if (!amount) {
      alert('请输入充值金额')
      return
    }
    console.log('充值金额:', amount)
    navigate('/zhu3')
    // 处理充值逻辑
  }

  const handleRecord = () => {
    // 跳转到充值记录页面
    console.log('查看充值记录')
  }

  return (
    <div className="zhu2-container">
      {/* 顶部导航栏 */}
      <NavBar
        onBack={handleBack}
        right={
          <Space>
            <MoreOutline fontSize={20} />
            <div className="nav-icon">◎</div>
          </Space>
        }
        className="zhu2-navbar"
      >
        住院预交
      </NavBar>

      {/* 患者信息区域 */}
      <div className="patient-info">
        <div className="patient-basic">
          <span className="patient-name">王小柯</span>
          <span className="patient-id">2015****10</span>
        </div>
        <div className="switch-patient">
          <UserOutline fontSize={16} />
          <span>切换</span>
        </div>
      </div>

      {/* 医院信息卡片 */}
      <Card className="hospital-card">
        <div className="hospital-info">
          <div className="hospital-icon">🏥</div>
          <span className="hospital-name">四川省保健院</span>
        </div>
        
        <div className="patient-details">
          <div className="detail-item">
            <span className="label">住院人：</span>
            <span className="value">王小柯</span>
          </div>
          <div className="detail-item">
            <span className="label">住院病区：</span>
            <span className="value">内一科病区</span>
          </div>
          <div className="detail-item">
            <span className="label">住院号：</span>
            <span className="value">2020010105</span>
          </div>
        </div>
      </Card>

      {/* 余额显示 */}
      <Card className="balance-card">
        <div className="balance-title">剩余金额(元)</div>
        <div className="balance-amount">{balance}</div>
      </Card>

      {/* 预存金额输入 */}
      <Card className="deposit-card">
        <div className="deposit-title">预存金额</div>
        <div className="input-container">
          <span className="currency-symbol">¥</span>
          <Input
            className="amount-input"
            placeholder="点击输入预存金额"
            value={amount}
            onChange={setAmount}
            type="number"
          />
        </div>
        
        {/* 快速选择按钮 */}
        <div className="quick-select">
          <Button 
            className="quick-btn" 
            size="small"
            onClick={() => handleQuickSelect('100')}
          >
            ¥ 100
          </Button>
          <Button 
            className="quick-btn" 
            size="small"
            onClick={() => handleQuickSelect('500')}
          >
            ¥ 500
          </Button>
          <Button 
            className="quick-btn" 
            size="small"
            onClick={() => handleQuickSelect('1000')}
          >
            ¥ 1000
          </Button>
        </div>
      </Card>

      {/* 立即充值按钮 */}
      <div className="recharge-button-container">
        <Button 
          className="recharge-button" 
          block 
          color="primary"
          onClick={handleRecharge}
        >
          立即充值
        </Button>
      </div>

      {/* 充值记录 */}
      <div className="record-section" onClick={handleRecord}>
        <div className="record-content">
          <div className="record-icon">📄</div>
          <span className="record-text" onClick={()=>navigate('/note')}>充值记录</span>
        </div>
        <RightOutline fontSize={16} color="#999" />
      </div>
    </div>
  )
}

export default Index